<template>
  <div>
    <el-input
        class="input-with-select"
        v-model="components_fuzzy_search.value"
        @keyup.enter="components_querySearchHandleName()"
        @blur="check_input"
        ref="inputRef"
    >
      <template #prepend>
        <el-radio-group v-model="components_fuzzy_search.mode">
          <el-radio-button value="助记码">助记码</el-radio-button>
          <el-radio-button value="名称">名称</el-radio-button>
        </el-radio-group>
      </template>

      <template #append>
          <el-button @click="clear_all()">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
      </template>

    </el-input>
  </div>

  <!-- 弹出选择框 -->
  <el-dialog v-model="visible" :width="500" @close="dialog_close">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="components_handleSelectHandleName"
        stripe
    >
      <el-table-column type="index" width="50"/>
      <el-table-column prop="name" label="处理方分组名称"/>
      <el-table-column prop="mnemonic" label="助记码"/>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 500]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=" total "
    />
  </el-dialog>


</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {Delete} from "@element-plus/icons-vue";
import {HandleGroupFuzzySearchResponse, HandleGroupList} from "@/api/inventory/handle_group/type.ts";
import {reqHandleGroupFuzzySearch} from "@/api/inventory/handle_group";
import {ElMessage} from "element-plus";

const check_input = () => {
  if (components_fuzzy_search.value !== components_fuzzy_search.old_value)
    components_fuzzy_search.value = components_fuzzy_search.old_value
}

// 小类列表前端分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
  components_querySearchHandleName()
})
let tableData: HandleGroupList[] = []

// 弹出选择框
const visible = ref(false)

const components_fuzzy_search = reactive<HandleGroupAutoCompletion>({
  mode: '助记码',
  value: '',
  old_value: '',
  id: null
})

export interface HandleGroupAutoCompletion {
  mode: '名称' | '助记码'
  value: string
  old_value: string
  id: number | null
}

// 进行模糊搜索
const components_querySearchHandleName = () => {
  if ((components_fuzzy_search.value !== components_fuzzy_search.old_value) || components_fuzzy_search.value === '' || components_fuzzy_search.value === null) {
    let temp1
    let temp2
    if (components_fuzzy_search.mode == '名称') {
      temp1 = components_fuzzy_search.value
      temp2 = null
    } else {
      temp1 = null
      temp2 = components_fuzzy_search.value
    }
    reqHandleGroupFuzzySearch({
      name: temp1,
      mnemonic: temp2,
      enable: 'enable',
      start: (currentPage.value - 1) * pageSize.value,
      stop: currentPage.value * pageSize.value,
    }).then((result: HandleGroupFuzzySearchResponse) => {
      tableData = result.data.result
      total.value = result.data.total
      ElMessage.success(result.success?.message)
      visible.value = true  // 弹出选择框
    })
  }
}

const inputRef = ref() // 用于关闭选择框之后使得选择框重新选中

// 在模糊搜索返回结果中点击确定后，保存搜索结果，清理掉之前的搜索结果
const components_handleSelectHandleName = (item: HandleGroupList) => {
  components_fuzzy_search.value = item.name
  components_fuzzy_search.id = item.id
  components_fuzzy_search.old_value = item.name
  cmy('DataUse', components_fuzzy_search)
  visible.value = false
}

// 选择框关闭时输入框恢复焦点
const dialog_close = () => {
  inputRef.value.focus()
}

const clear_all = () => {
  clear_input()
  cmy('DataClear')
}

const abc = defineProps(["disable", 'content']);
if (abc.content !== undefined) {
  components_fuzzy_search.value = abc.content
  components_fuzzy_search.old_value = abc.content
} else {
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
}

const cmy = defineEmits(["DataUse", "DataClear"]);
// 清空搜索框
const clear_input = () => {
  components_fuzzy_search.id = null
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
}
// 项搜索框中传值
const make_input_value = (val: string) => {
  components_fuzzy_search.value = val
  components_fuzzy_search.old_value = val
}
defineExpose({clear_input, make_input_value});
</script>


<style>
.input-with-select .el-input-group__prepend {
  padding: 0;
}
</style>
